<template>
    <!--检查任务内容-->
    <div class="listTemplate">
        <mt-header title="检查任务内容" class="header">
            <router-link to="/mycheck" slot="left">
                <mt-button icon="back"></mt-button>
            </router-link>
            <i slot="right" @click="open = true" class="iconfont iconshaixuan4 active-color right-icon"></i>
        </mt-header>
        <section class="t-body">
            <section class="sticky">
                <mu-tabs :value.sync="activeTab" inverse color="primary" indicator-color="#fff" full-width
                         style="background-color:#fff;margin-bottom:2px;">
                    <mu-tab>概要信息</mu-tab>
                    <mu-tab>
                        <span v-if="data.checkProblems != ''">排查问题</span>
                        <span v-if="data.checkProblems == ''">检查内容</span>
                    </mu-tab>
                    <mu-tab>检查记录</mu-tab>
                </mu-tabs>
            </section>
            <div v-if="activeTab === 0">
                <!--概要信息-->
                <task_Summary_card v-bind="data"></task_Summary_card>
                <div class="btn">
                    <mu-button small  color="primary" @click="Start">开始检查</mu-button>
                </div>
            </div>
            <div v-if="activeTab === 1">
                <!--检查内容-->
                <inspection_content_card v-bind:tableList="tableList" v-if="data.checkProblems == ''"></inspection_content_card>
                <!--排查问题-->
                <trouble_shooting_card v-bind:problems = 'problems' v-if="data.checkProblems != '' " ></trouble_shooting_card>
                <div class="btn">
                    <mu-button small  color="primary" @click="Start">开始检查</mu-button>
                </div>
            </div>

            <div v-if="activeTab === 2">
                <!--检查记录列表-->
              <inspection_record_card v-bind:problemArray = 'problemArray'></inspection_record_card>
            </div>
        </section>
    </div>
</template>

<script>
    import task_Summary_card from '../../QualityModule/parameter/task/components/TaskSummaryCard'
    import inspection_content_card from '../../QualityModule/parameter/task/components/InspectionContentCard'
    import trouble_shooting_card from '../../QualityModule/parameter/task/components/TroubleShootingCard'
    import inspection_record_card from '../../QualityModule/parameter/task/components/InspectionRecordCard'

    export default {
        name: 'mainPage',
        components:{
            task_Summary_card,//概要信息
            inspection_content_card,//排查问题
            trouble_shooting_card,//检查内容
            inspection_record_card, //检查记录
        },
        watch :{
            problems (n,o) {
                if (n == '') {
                    this.Troubleshooting();
                }
            }
        },
        data () {
            return {
                id:'',
                tableList:{},
                problemArray:[],
                problems:{},
                data: {},
                num: 20,
                refreshing: false,
                loading: false,
                text: 'List',
                open: false,
                activeTab: 0,
            }
        },
        mounted () {
            this.fetch();
            this.inspection();
        },
        created () {
            console.log(this.$A.GUP().id);
            this.id = this.$A.GUP().id
        },
        methods: {
            //开始检查
            Start () {
                if (this.data.checkProblems != '') {
                    this.$router.push({
                        path:'/startInvestigation',//排查问题
                        query:{id:this.problemArray.id}
                    })
                }else {
                    this.$router.push({
                        path:'/startChecking',//检查问题
                        query:({id:this.problemArray.id})
                    })
                }
            },
            //排查内容
            Troubleshooting () {
                let params = {
                    checkPlanId:'159723511546380694'
                };
                this.$A.Go('get', '/safety/checkPlan/checkTables', params).then((success) => {
                    if (success.code == 200) {
                        this.tableList = success.body;
                    }else {

                    }
                })
            },
            //开始检查
            inspect() {
                let obj = {
                    orgName: this.data.orgName,
                    checkTypeName:this.data.checkTypeName,
                    areaName :this.data.areaName,
                    checkParts:this.checkParts,
                };
                this.$router.push({path:'./mycheckConDetail',query: {info:obj}});
            },
            fetch () {
                this.$A.Go('get', '/safety/checkPlan/detail', {
                    'id':this.id,
                }).then((success) => {
                    if (success.code == 200) {
                        console.log(success);
                        this.data = success.body;
                        if (this.data.checkProblems != '') {
                            this.problems = JSON.parse(this.data.checkProblems);
                        }else {
                            this.problems = this.data.checkProblems;
                        }
                    } else {
                        this.$A.MS('操作失败，请联系管理员！', 'error')
                    }
                }, function (err) {

                });
            },
            //检查记录
            inspection () {
                let params ={
                    // planId:
                };
                this.$A.Go('get', '/safety/checkTask/rec/pageList', params).then((success) => {
                    if (success.code == 200) {
                        this.problemArray = success.body.rows;
                    }else {

                    }
                }, function (err) {

                });
            },


            toggle (panel) {
                this.panel = panel === this.panel ? '' : panel;
            },
            closeBottomSheet (isnot) {
                this.open = isnot;
            },
            refresh () {
                this.refreshing = true;
                this.$refs.container.scrollTop = 0;
                setTimeout(() => {
                    this.refreshing = false;
                    this.text = this.text === 'List' ? 'Menu' : 'List';
                    this.num = 20;
                }, 2000)
            },
            load () {
                this.loading = true;
                setTimeout(() => {
                    this.loading = false;
                    this.num += 20;
                }, 2000)
            }
        },
    }
</script>
<style lang="scss" scoped>
    .listTemplate {
        height: 100%;
        width: 100%;
        position: relative;
        overflow: hidden;
        .t-header {
            height: 0.45rem;
            width: 100%;
            color: #3D3D3D;
            box-sizing: border-box;
            padding: 5px 8px;
            position: relative;
            -border-bottom: 1px solid #dedede;
            display: flex;
            justify-content: space-between;
            align-items: center;
            background-color: #fff;
            .t-close {
                min-width: 28px;
                border-radius: 50%;
            }
            .t-title {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                font-size: 0.19rem;
                font-weight: 500;
            }
            .t-right-icon {
                font-size: 0.2rem;
            }
        }
        .t-body {
            height: calc(100% - 0.45rem);
            width: 100%;
            overflow: auto;
            background-color: #F8F8F8;
            .btn{
                width: 100%;
                margin:0.12rem 0;
               text-align: center;
            }
        }
        .t-body + .t-footer {
            height: 0.45rem;
            width: 100%;
        }
        .t-footer + .t-body {
            height: calc(100% - 0.9rem);
        }
        //自定义样式
        .areaTitle {
            font-size: 0.16rem;
            padding: 10px 20px;
            background-color: #fff;
            -border-bottom: 1px solid #dedede;
        }
        .box {
            padding: 10px 10px;
            background-color: #fff;
        }
        .line-list {
            margin: 5px 0;
            font-size: 0.15rem;
        }
        .textdot {
            display: block;
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .sticky {
            position: sticky;
            top: 0px;
            z-index: 2;
        }
        .demo-text {
            padding: 10px;
        }
    }

    .flex_b {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .lan-panel {
        .mu-expansion-panel__expand {
            margin: 0;
            border-bottom: 1px solid #dedede;
        }
        .mu-expansion-panel {
            box-shadow: none !important;
        }
    }
</style>
<style lang="scss">
    .t-close {
        .mu-button-wrapper {
            padding: 0 !important;
        }
    }
</style>
